<template>
	<div class="right-box">
		<el-input
			v-model="searchValue"
			placeholder="请输入你想搜索的内容"
			clearable
			prefix-icon="el-icon-search"
		>
		</el-input>
		<div class="user-icon">
			<el-tooltip
				class="item"
				effect="light"
				:content="user.description"
				placement="bottom"
			>
				<img :src="user.avatar" alt="" />
			</el-tooltip>
		</div>
	</div>
</template>

<script>
export default {
	name: "top-bar-right",
	components: {},
	data() {
		return {
			searchValue: ""
		};
	},
  props: {
    user: {
      type: Object,
      default () {
        return {
          nickname: '未知用户',
          avatar: '',
          description: '未知的座右铭。'
        }
      }
    },
  }

};
</script>

<style lang="scss">
.right-box {
	height: 80px;
	line-height: 80px;
	width: auto;
	position: fixed;
	top: 5px;
	right: 0;

	.el-icon-search {
		width: auto;
		height: auto;
		transform: scale(1.5);
		&:hover {
			color: #fe9600;
			cursor: pointer;
		}
	}
	.el-input {
		right: 80px;
	}
	.el-input__inner {
		background-color: transparent;
	}
	.user-icon {
		position: absolute;
		top: 15px;
		right: 15px;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		img {
			border-radius: 50%;
			width: 100%;
			height: 100%;
		}
	}
}
</style>
